import React from 'react';
import MyJRoll from '../../../utils/MyJRoll/Yr.js'
import { connect } from 'dva';
import styles from './laundry_editor.less';
import styles1 from './laundry_editor.css';
import { getData } from '../../../utils/localData'
import { NavBar, Icon, List,Checkbox,Stepper } from 'antd-mobile';


const Item = List.Item;
@connect(({global,shoppingCart}) => ({
  global,shoppingCart
}))
export default class Laundry_editor extends React.Component {
   constructor(props) {
    super(props);
    this.state = {
      shopCart:[],
      scSum:0,
      isAll:false
    };
  }
  myOnChange(e) {
    console.log(e.target.checked)
    this.state.shopCart[e.target.datav].isClick = e.target.checked
    let sum = 0;
    let isAll = true
    this.state.shopCart.forEach((item,index)=>{
      if( this.state.shopCart[index].isClick){
        sum += (this.state.shopCart[index].currentPrice*this.state.shopCart[index].buyNum)
      }else{
        isAll = false
      }
    })
    this.setState({shopCart:this.state.shopCart,scSum:sum,isAll:isAll})
  }
  myOnChangeAll(e) {
    console.log(e.target.checked)
    if(this.state.shopCart){
      let sum = 0;
      this.state.shopCart.forEach((item,index)=>{
        this.state.shopCart[index].isClick = e.target.checked
        if( this.state.shopCart[index].isClick){
          sum += (this.state.shopCart[index].currentPrice*this.state.shopCart[index].buyNum)
        }
      })
      this.setState({shopCart:this.state.shopCart,scSum:sum,isAll:e.target.checked})
    }
  }
  onChange(index){
    let i = index
    return function(val){
      this.state.shopCart[i].buyNum = val
      //console.log(this)
      this.setState({shopCart:this.state.shopCart})
    }
  }
  render() {
    console.log("购物车编辑渲染")
    const rheight = (document.documentElement.clientHeight - document.documentElement.clientHeight*0.11 - 45)+"px"
    const gs = []
    this.state.shopCart = this.props.shoppingCart.shoppingCarts
    console.log(this.props.shoppingCart)
    if(this.state.shopCart && this.state.shopCart.length>0){
      this.state.shopCart.forEach((item,index)=>{
        if(this.state.shopCart[index].isClick===undefined)this.state.shopCart[index].isClick = false
        gs.push(<div key={item.businessCommodityId}>
          <div className={styles.lau_left}>

            <div className={styles.lau_leftin}>
                <Checkbox onChange={this.myOnChange.bind(this)} checked={this.state.shopCart[index].isClick} datav={index} className={styles.lau_num}></Checkbox>
                 <img src={item.commodityImgUrl} className={styles.lay_img} alt="" />

                 <div className={styles.lau_leftname}>
                     <div className={styles.lau_name}>{item.commodityName}</div>
                     <div className={styles.lau_prince}> <span className={styles.lau_princein}>￥</span>{item.currentPrice}</div>
                </div>

            </div>
            <Stepper
                 style={{ width: '2.04rem', minWidth: '2.04rem' }}
                 showNumber
                 //max={10}
                 min={1}
                 value={item.buyNum}
                 onChange={this.onChange(index).bind(this)}/>
           </div>
        </div>)
      })
    }

    return (
      <div className={styles.lau_allb}>
      <div className={styles1.lau_mea}>
        {gs.length>0?
        <MyJRoll
          //height={rheight}
          bounce = {true}
          bottomFr={null}
          isOut={this.props.shoppingCart.isBack}

        >
            <List className="my-list" className={styles.lau_list}>
              {gs}
            </List>
        </MyJRoll>
        :null
        }

       </div>


        <div className={styles.lau_bot}>

          <div className={styles1.lau_lefbot}>
            <Checkbox onChange={this.myOnChangeAll.bind(this)} checked={this.state.isAll} className={styles.lau_numall}></Checkbox>
            <span className={styles.lau_text}>全选</span>
          </div>

          <button className={styles.lau_rigbut} onClick={this.delCart.bind(this)}>
              删除
          </button>
        </div>

      </div>


    )
  }

  componentDidMount(){
    this.props.shoppingCart.isBack = false
    this.selShoppingCart()
    if(window.YLJsBridge){
      window.YLJsBridge.call(
        'showRightItem',
        {isShow:true,message:"完成"})
      window.rightItemClick =()=>{
        this.saveCart()
      }
    }
  }

  componentDidUpdate(){
    const {isBack} = this.props.shoppingCart
    if(isBack){
      this.props.history.goBack()
    }
  }
  delCart(){
    console.log("删除")
    console.log(this.state.shopCart)
    let businessId = getData("businessId");
    let user = JSON.parse(getData("userInfo"));
    let keys = []
    this.state.shopCart.forEach((item,index)=>{
      if(this.state.shopCart[index].isClick){
        keys.push(this.state.shopCart[index].shoppingCartKey)
      }
    })
    const { dispatch } = this.props
    let qs = {businessId:businessId,userId:user.userId}
    console.log(keys)
    dispatch({
      type: 'shoppingCart/delShoppingCart',
      payload: {cart:{
        shoppingCartKeys:keys.toString(),
      },qs:qs},
    })
  }

  selShoppingCart(){
    const { dispatch } = this.props
    console.log(this.props.global.BusinessInfo.businessId)
    let businessId = getData("businessId");
    let user = JSON.parse(getData("userInfo"));
    console.log(businessId+"========="+user.userId);
    dispatch({
        type: 'shoppingCart/selShoppingCart',
        payload: {businessId:businessId,userId:user.userId},
    })
  }
  saveCart(){
    console.log("保存")
    console.log(this.state.shopCart)
    if(this.state.shopCart){
      let businessId = getData("businessId");
      let user = JSON.parse(getData("userInfo"));
      this.state.shopCart.forEach((item,index)=>{
        delete this.state.shopCart[index].isClick
      })
      const { dispatch } = this.props
      let qs = {businessId:businessId,userId:user.userId}
      dispatch({
        type: 'shoppingCart/saveShoppingCart',
        payload: {cart:{
          commodityLists:this.state.shopCart,
          businessId:businessId,
          userId:user.userId
        },qs:qs},
      })
    }else{
      this.props.history.goBack()
    }
  }

}
